<article>
    <h1><?php echo $GLOBALS['title'] ?></h1>
    <p>在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。</p>
    <p>根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：</p>
    <ol>
    	<li>整个文档是一个文档节点</li><p></p>
    	<li>每个 HTML 元素是元素节点</li><p></p>
    	<li>HTML 元素内的文本是文本节点</li><p></p>
    	<li>每个 HTML 属性是属性节点</li><p></p>
    	<li>注释是注释节点</li><p></p>
    </ol>
    <img src="__PUBLIC__/images/ct_htmltree.gif" width="80%" alt="">
    <h3>节点的关系</h3>
    <p>父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。</p>
     <img src="__PUBLIC__/images/dom_navigate.gif"  alt="">
    <h2><a>节点的属性</a></h2>
    <p>通过节点的属性，能够获取到每个节点之间的关系，并且可以通过这种关系,准确快速的获取到相应节点的对象。</p>
    <table class="dataintable">
		<tbody>
			<tr>
				<th>属性 / 方法</th>
				<th>描述</th>
			</tr>
			<tr>
				<td><a>parentNode</a></td>
				<td>返回元素的父节点。</td>
			</tr>
			<tr>
				<td><a>childNodes</a></td>
				<td>返回元素子节点的 NodeList。</td>
			</tr>
			<tr>
				<td><a>firstChild</a></td>
				<td>返回元素的首个子节点。</td>
			</tr>
			<tr>
				<td><a>lastChild</a></td>
				<td>返回元素的最后一个子元素。</td>
			</tr>
			<tr>
				<td><a>nextSibling</a></td>
				<td>返回位于相同节点树层级的下一个节点。</td>
			</tr>
			<tr>
				<td><a>previousSibling</a></td>
				<td>返回位于相同节点树层级的前一个元素。</td>
			</tr>
		</tbody>
	</table>
	<h2><a>节点的方法</a></h2>
	<p>我们之前对页面元素的操作，都是在操作现有的元素，  那么我们如何动态的创建、删除、更改、复制元素，给  元素添加属性、样式呢？就就需要用到我们节点的方法。</p>
	<h3>createElement()</h3>
	<p>	创建元素节点。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	var Elemment = document.createElement("元素标签名");
</script>') ?></code></pre>
	<h3>createTextNode()</h3>
	<p>	创建文本节点。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	var textNode = document.createTextNode("文本");
</script>') ?></code></pre>
	<h3>appendChild()</h3>
	<p>	把新的子节点添加到指定节点。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	node.appendChild(node);
</script>') ?></code></pre>
	<h3>insertBefore()</h3>
	<p>	方法在您指定的已有子节点之前插入新的子节点。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	nnode.insertBefore(newnode,existingnode)
</script>') ?></code></pre>
	<h3>removeChild()</h3>
	<p>	 方法指定元素的某个指定的子节点。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	nnode.removeChild(node)
</script>') ?></code></pre>
	<h3>replaceChild()</h3>
	<p>	 方法用新节点替换某个子节点。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	nnode.replaceChild(newnode,oldnode)
</script>') ?></code></pre>
	<h3>cloneNode()</h3>
	<p>	方法创建节点的拷贝，并返回该副本。。</p>
	<h4>语法</h4>
	<pre><code><?php echo htmlspecialchars('
<script type="text/javascript">
	node.cloneNode(deep);
</script>') ?></code></pre>
	<p>该方法有一个参数（true 或 false）。如果设置为true,  所有的子节点也会克隆，否则只会克隆本节点。</p>
	<h3>作业</h3>
	<p>写一个模板聊天室的页面，点击发送，把内容追加到聊天窗口</p>
	<table class="dataintable">
	    <tbody>
	        <tr>
	            <th>
	                方法
	            </th>
	            <th>
	                描述
	            </th>
	        </tr>
	        <tr>
	            <td>
	                <a>appendChild()</a>
	            </td>
	            <td>
	                把新的子节点添加到指定节点。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>removeChild()</a>
	            </td>
	            <td>
	                删除子节点。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>replaceChild()</a>
	            </td>
	            <td>
	                替换子节点。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>insertBefore()</a>
	            </td>
	            <td>
	                在指定的子节点前面插入新的子节点。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>createAttribute()</a>
	            </td>
	            <td>
	                创建属性节点。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>createElement()</a>
	            </td>
	            <td>
	                创建元素节点。
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <a>createTextNode()</a>
	            </td>
	            <td>
	                创建文本节点。
	            </td>
	        </tr>
	    </tbody>
	</table>
</article>
